<template>
	<screen-page title="储运部内部工作看板">
		<div class="warehouse-logistics-container hor-flex-containter">
			<div class="divider"></div>
			<div class="flex-block ver-flex-containter">
				<div class="ver-flex-block hor-flex-containter">
					<div class="flex-block">
						<screen-block title="预约送货审核">
							<module1 :data-source="data1" v-if="loaded1" />
						</screen-block>
					</div>
					<div class="divider"></div>
					<div class="flex-block">
						<screen-block title="收货">
							<module2 :data-source="data2" v-if="loaded1" />
						</screen-block>
					</div>
				</div>
				<div class="ver-divider"></div>
				<div class="ver-flex-block hor-flex-containter">
					<div class="flex-block">
						<screen-block title="入库">
							<module3 :data-source="data3" v-if="loaded1" />
						</screen-block>
					</div>
					<div class="divider"></div>
					<div class="flex-block">
						<screen-block title="出库">
							<module4 :data-source="data4" v-if="loaded1" />
						</screen-block>
					</div>
				</div>
			</div>
			<div class="divider"></div>
			<div class="special-blcok special-blcok-size-a">
				<screen-block title="当日任务">
					<module5 ref="module5" :data-source="data5" v-if="loaded2" />
				</screen-block>
			</div>
			<div class="divider"></div>
		</div>
	</screen-page>
</template>

<script setup>
import { ref, inject, getCurrentInstance, onMounted, onBeforeUnmount, nextTick } from 'vue';
import ScreenPage from '@/components/ScreenPage.vue'
import ScreenBlock from '@/components/ScreenBlock.vue'
import Module1 from './modules/LogisticsModule1.vue'
import Module2 from './modules/LogisticsModule2.vue'
import Module3 from './modules/LogisticsModule3.vue'
import Module4 from './modules/LogisticsModule4.vue'
import Module5 from './modules/LogisticsModule5.vue'

const $config = inject('$config')
const $api = inject('$api')
const instance = getCurrentInstance()

let interval1 = null;
let interval2 = null;

const data1 = ref([])
const data2 = ref([])
const data3 = ref([])
const data4 = ref([])
const data5 = ref({
	deliverySum:0,
	completed:0,
	unfinished:0,
	receiptSum:0,
	goodsReceived:0,
	unreceivedGoods:0,
	warehousingSum:0,
	warehousing:0,
	noWarehousing:0,
	issueSum:0,
	issue:0,
	notIssued:0
})

const loaded1 = ref(false)
const loaded2 = ref(false)

const getData = function(){
	getData1()
	getData2()
}

const getData1 = function(){
	loaded1.value = false
	Promise.all([
		$api.get('DeliveryAudit',{},{block:'warehouse'}),
		$api.get('Receipt',{},{block:'warehouse'}),
		$api.get('Warehousing',{},{block:'warehouse'}),
		$api.get('Delivery',{},{block:'warehouse'})
	]).then(response=>{
		data1.value = response[0] || []
		data2.value = response[1] || []
		data3.value = response[2] || []
		data4.value = response[3] || []
		loaded1.value = true
	}).catch(()=>{
		loaded1.value = true
	})
}

const getData2 = function(){
	loaded2.value = false
	$api.get('TodayTask',{},{block:'warehouse'}).then((d)=>{
		data5.value = d || {}
		loaded2.value = true
		nextTick(()=>{
			instance.refs.module5.drawCharts()
		})
	}).catch(()=>{
		loaded2.value = true
	})
}

const destoryIntervel1 = function(){
	try{
		window.clearInterval(interval1)
		interval1 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel2 = function(){
	try{
		window.clearInterval(interval2)
		interval2 = null
	}catch(e){
		//TODO handle the exception
	}
}

const destoryIntervel = function(){
	destoryIntervel1()
	destoryIntervel2()
}

const createInterval = function(){
	interval1 = window.setInterval(getData1,$config.base.screen.warehouseLogistics.intervalTime1)
	interval2 = window.setInterval(getData2,$config.base.screen.warehouseLogistics.intervalTime2)
}

onMounted(()=>{
	getData()
	createInterval()
})

onBeforeUnmount(()=>{
	destoryIntervel()
}) 
</script>

<style lang="scss" scoped>
.warehouse-logistics-container{
	padding-bottom: 0.68%;
	height: 100%;
	box-sizing: border-box;
	.divider{
		width: .14em;
		flex-shrink: 0;
	}
	.flex-block{
		width: 1px;
		flex-grow: 1;
	}
	.ver-flex-block{
		height: 1px;
		flex-grow: 1;
	}
	.ver-divider{
		height: .14em;
		flex-shrink: 0;
	}
	.special-blcok{
		flex-shrink: 0;
	}
	.special-blcok-size-a{
		width: 400px;
	}
}
</style>